<template>
	<view>
		<view class="contactUs">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
					<u-icon :customStyle="{paddingTop:36+'rpx'}" :name="listItem.name" :size="20"></u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="chat-content">
			<view class="flex-align">
				<u-avatar src="" shape="square" size="40"></u-avatar>
				<view class="jobercomm">99</view>
			</view>
			<view class="mine flex-align">
				<view class="minecomm">99</view>
				<u-avatar src="" shape="square" size="40"></u-avatar>
			</view>
		</view>
		<view class="input-box flex-align">
			<u-button type="primary" text="常用语"></u-button>
			<u--input placeholder="新消息" border="surround" v-model="value" @change="change"></u--input>
			<image class="smile" src="../../../static/smile.png" mode=""></image>
			<image class="add" src="../../../static/add.png" mode=""></image>
		</view>
		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<view class="rect">
					<u--text text="“职聊社交”想要访问您的位置" color="#2C2C2C" size="36rpx"></u--text>
					<view class="permission">
						<text>一、保障招聘者身份真实性</text>
						在用户认证(包括环境认证、企业认证、实名认证)，及账号在网页版登录，需要确认用户当前位置，收集您的GPS信息，用于辅助判断是否存在他人作弊、盗用信息的风险，确认招聘者身份真实性，保障求职者安全。
						<text>二、保证职位、信息发布真实有效性</text>
						职位发布、职位.上线时，获取GPS信息，用于确保招聘者的身份、发布的职位的真实性。三、招聘者在互动聊天时，需要获取您的GPS信息，辅助判断您的动作是否存在位置异常作弊行为，避免求职者被异常用户诈骗。
						为了确保求职安全，职聊社交APP需调用高德地图，在.上述场景下收集和核实您的位置信息。如您希望了解更多，请查看高德地图<span
							class="private">《隐私政策》</span>。招聘者身份在.上述场景必须启用位置权限，请您理解。
					</view>
					<view class="reject flex">
						<u-button @click="show = false" text="拒绝"></u-button>
						<u-button @click="agree" text="同意"></u-button>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				show: false,
				list: [{
						name: 'photo',
						title: '简历'
					},
					{
						name: 'lock',
						title: '联系方式'
					},
					{
						name: 'star',
						title: '面试'
					},
					{
						name: 'hourglass',
						title: '标记'
					},
				],
			};
		},
		mounted() {
			console.log('0000')
			this.showLocation()
		},
		methods: {
			showLocation() {
				this.show = true
			},
			agree() {
				this.show = false
				wx.getLocation({
					type: 'wgs84',
					success(res) {
						const latitude = res.latitude
						const longitude = res.longitude
						const speed = res.speed
						const accuracy = res.accuracy
						console.log(res, '---')
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.contactUs {
		background-color: #ffffff;
		padding: 36rpx 10rpx 22rpx 10rpx;
	}

	.grid-text {
		font-weight: 400;
		font-size: 20rpx;
		color: #8A8A8A;
		line-height: 28rpx;
	}

	::v-deep .u-icon__icon {
		padding: 0 !important;
		margin-bottom: 2rpx;
	}

	.input-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 104rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(208, 208, 208, 0.3);
	}

	.chat-content {
		padding: 42rpx 28rpx 0rpx 28rpx;
		// background-color: #8A8A8A;
		height: 100%;
	}

	::v-deep .input-box .u-button {
		width: 132rpx;
		height: 60rpx;
		background: #429CFD;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		flex-shrink: 0;
		margin-left: 20rpx;

		span {
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	::v-deep .input-box .u-input {
		margin: 0rpx 2rpx;
		height: 46rpx;
	}

	.smile,
	.add {
		width: 60rpx;
		height: 60rpx;
	}

	.add {
		margin: 0rpx 24rpx 0rpx 12rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 570rpx;
		height: 916rpx;
		padding: 26rpx 34rpx 24rpx 36rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.permission {
		font-weight: 400;
		font-size: 28rpx;
		color: #6D6D6D;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin: 14rpx 0rpx 146rpx 0rpx;

		.private {
			color: #1872FF;
		}
	}

	.reject {
		justify-content: flex-end;
		column-gap: 44rpx;
	}

	::v-deep .reject .u-button {
		padding: 0;
		border: none;
		width: 80rpx;
		height: 46rpx;
		font-weight: 400;
		color: #B8B8B8;
		line-height: 46rpx;
		margin: 0;

		span {
			font-size: 32rpx;
		}

		&::before,
		&::after {
			content: none !important;
		}

		&:nth-child(2) {
			color: #1872FF;
		}
	}

	.minecomm,
	.jobercomm {
		height: 46rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #3D3D3D;
		line-height: 46rpx;
		text-align: left;
		padding: 8rpx 12rpx 8rpx 32rpx;
		background-color: #ffffff;
	}

	.minecomm {
		margin-right: 14rpx;
		border-radius: 16rpx 0rpx 16rpx 16rpx;
	}

	.mine {
		justify-content: flex-end;
	}

	.jobercomm {
		margin-left: 14rpx;
		border-radius: 0rpx 16rpx 16rpx 16rpx;
	}
</style>